<template>
    <div>
        {{ formater }}
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, watch } from "vue";
const props = defineProps({
    second: {
        type: Number,
        default: 0,
    },
    format: {
        type: String,
        default: "MM-dd hh:mm",
    },
    sformat: {
        type: String,
        default: "hh:mm:ss",
    },
    suffix: {
        type: String,
        default: "",
    },
});
const emit = defineEmits(["counterOver"]);
// 倒计时显示
const formater = ref("");

onMounted(() => {
    formater.value = TIME_FORMAT(props.second);
});
// 倒计时逻辑处理
const TIME_FORMAT = (ts) => {
    let res;

    const showtime = () => {
        if (ts <= 0) {
            clearInterval(run);
            emit("counterOver");
            return TIME_SFORMAT(0, props.sformat, props.suffix);
        }
        res = TIME_SFORMAT(ts, props.sformat, props.suffix);
        return res;
    };
    const run = setInterval(() => {
        ts -= 1000;
        res = showtime();
        formater.value = res;
    }, 1000);
    return showtime();
};
const TIME_FORMIN = (param) => {
    if (param < 0) {
        param = 0;
    }
    if (param < 10) {
        param = "0" + param;
    }
    return param;
};

const TIME_SFORMAT = (ts, sfmt, suffix) => {
    const time = {
        "h+": TIME_FORMIN(Math.floor((ts / 1000 / 60 / 60) % 24)),
        "m+": TIME_FORMIN(Math.floor((ts / 1000 / 60) % 60)),
        "s+": TIME_FORMIN(Math.floor((ts / 1000) % 60)),
    };
    for (let k in time) {
        if (new RegExp("(" + k + ")").test(sfmt)) {
            sfmt = sfmt.replace(
                RegExp.$1,
                RegExp.$1.length == 1
                    ? time[k]
                    : ("00" + time[k]).substr(("" + time[k]).length)
            );
        }
    }
    return sfmt + suffix;
};
</script>

<style></style>